<template>
    <div id="allmap" v-bind:style="mapStyle"></div>
</template>

<script>
    export default {
        name: 'baidu',
        data:function(){
            return{
                mapStyle:{
                    width:'100%',
                    height:this.mapHeight +'px'
                }
            }
        },
        props:{
            // 地图在该视图上的高度
            mapHeight:{
                type:Number,
                default:800
            },
            // 经度
            longitude:{
                type:Number,
                default:116.404
            }
        },
        mounted(){
            let map = new BMapGL.Map("allmap");
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
            let geolocation = new BMapGL.Geolocation();
            geolocation.getCurrentPosition(function(r){
                let point = new BMapGL.Point(r.point.lng,r.point.lat);
                /*定位到当前位置*/
                map.centerAndZoom(point,12);
            });

            let opts = {
                width : 200,     // 信息窗口宽度
                height: 100,     // 信息窗口高度
                title : "故宫博物院" , // 信息窗口标题
                message:"这里是故宫"
            }
            map.addEventListener("click", function(e){
                // alert('点击的经纬度：' + e.latlng.lng + ', ' + e.latlng.lat);
                let point = new BMapGL.Point(e.latlng.lng,e.latlng.lat);
                // 创建标注
                let marker = new BMapGL.Marker(point);
                // 将标注添加到地图中
                map.addOverlay(marker);
                let infoWindow = new BMapGL.InfoWindow('点击的经纬度：' + e.latlng.lng + ', ' + e.latlng.lat, opts);  // 创建信息窗口对象
                map.openInfoWindow(infoWindow, point); //开启信息窗口
            });
        }
    };
</script>

<style scoped>

</style>
